<template>
  <div class="app">
    <div v-show="false">
      <!-- 四个卡片 -->
      <div class="ant-row">
        <el-card class="ant-card-head">
          <div class="ant-card-body">
            <!-- 卡片标题 -->
            <div class="ant-card-head-title">
              <div class="num-div">
                <span>总销售额</span>
                <span>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="指标说明"
                    placement="top"
                  >
                    <el-icon><Warning /></el-icon>
                  </el-tooltip>
                </span>
              </div>
              <div class="h1">¥ 126,560</div>
              <div class="por">
                <span>昨日 0</span>
                <span>日环比 0%</span>
              </div>
              <el-divider />
            </div>
            <!-- 图表 -->
          </div>
        </el-card>
        <el-card class="ant-card-head">
          <div class="ant-card-body">
            <!-- 卡片标题 -->
            <div class="ant-card-head-title">
              <div class="num-div">
                <span>访问量</span>
                <span>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="指标说明"
                    placement="top"
                  >
                    <el-icon><Warning /></el-icon>
                  </el-tooltip>
                </span>
              </div>
              <div class="h1">8,848</div>
              <div class="por">
                <span>昨日 0</span>
                <span>日环比 0%</span>
              </div>
              <el-divider />
            </div>
          </div>
        </el-card>
        <el-card class="ant-card-head">
          <div class="ant-card-body">
            <!-- 卡片标题 -->
            <div class="ant-card-head-title">
              <div class="num-div">
                <span>下载数量</span>
                <span>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="指标说明"
                    placement="top"
                  >
                    <el-icon><Warning /></el-icon>
                  </el-tooltip>
                </span>
              </div>
              <div class="h1">6560</div>
              <div class="por">
                <span>昨日 0</span>
                <span>日环比 0%</span>
              </div>
              <el-divider />
            </div>
          </div>
        </el-card>
        <el-card class="ant-card-head">
          <div class="ant-card-body">
            <!-- 卡片标题 -->
            <div class="ant-card-head-title">
              <div class="num-div">
                <span>成交数</span>
                <span>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="指标说明"
                    placement="top"
                  >
                    <el-icon><Warning /></el-icon>
                  </el-tooltip>
                </span>
              </div>
              <div class="h1">5555</div>
              <div class="por">
                <span>昨日 0</span>
                <span>日环比 0%</span>
              </div>
              <el-divider />
            </div>
          </div>
        </el-card>
      </div>
      <!-- 图表 -->
      <OrderLine></OrderLine>
    </div>
    <el-card>
      <div class="home">
        <img
          class="home-bg"
          src="https://admin.spicyboy.cn/assets/png/welcome-65a50eaa.png"
          alt=""
        />
      </div>
    </el-card>
    <Config></Config>
  </div>
</template>

<script setup>
import OrderLine from "@/components/chars/orders_line.vue";
</script>

<style scoped>
.home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.home-bg {
  width: 70%;
  max-width: 1200px;
  margin-bottom: 20px;
}

/* 四个卡片 */
.ant-row {
  display: flex;
  justify-content: space-between;
}

.ant-row .ant-card-head {
  width: 393px;
  height: 182px;
}

.ant-card-body {
  padding: 10px 10px 10px;
}

.num-div {
  display: flex;
  align-content: center;
  justify-content: space-between;
}

.num-div span {
  height: 22px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 22px;
}

.ant-card-head-title .h1 {
  height: 38px;
  margin-top: 4px;
  margin-bottom: 0;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.85);
  font-size: 25px;
  line-height: 38px;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

.por {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
}

.por span {
  font-size: 14px;
  color: #51678a;
}

.por span:nth-child(1) {
  margin-right: 15px;
}
</style>